<template>
  <div ref="chart" style="width: 100%; height: 350px;"></div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  data: Array
});

const chart = ref(null);

const initChart = () => {
  if (chart.value && props.data) {
    const myChart = echarts.init(chart.value);

    const xAxisData = props.data.map(item => item.day);
    const uvData = props.data.map(item => item.uv);
    const pvData = props.data.map(item => item.pv);

    const option = {
      title: {
        text: '访问数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['IP', 'Visit',],
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 45
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'IP',
          type: 'line',
          data: uvData
        },
        {
          name: 'Visit',
          type: 'line',
          data: pvData
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
};

watch(() => props.data, initChart);

onMounted(initChart);
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>
